<template>
  <div class="home-public">
    <div class="home-common__warp main">
      <Row justify="space-between">
        <Col flex="486px">
          <div class="pt10">
            <div class="in-icon"></div>
          </div>
        </Col>
        <Col flex="670px">
          <div class="noticeComp">
            <h3 class="title">
              <router-link target="_blank" :to="`/articleList?&itemType=${activeKey==='1'?'0hsr1-k62mf0-00u31':'0hsr1-n8sgf0-00emb'}`">查看更多 <RightOutlined /></router-link>
            </h3>

            <Tabs v-model:activeKey="activeKey">
              <TabPane key="1" tab="通知">
                <articleList :itemId="`0hsr1-k62mf0-00u31`" :size="8" :showPagination="false" />
              </TabPane>
              <TabPane key="2" tab="公告">
                <articleList :itemId="`0hsr1-n8sgf0-00emb`" :size="8" :showPagination="false" />
              </TabPane>
            </Tabs>


          </div>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent,  ref} from 'vue';
import {Row, Col, Empty, Tabs} from "ant-design-vue";
import { RightOutlined } from '@ant-design/icons-vue';
import articleList from "/@/views/home/components/articleList.vue";
export default defineComponent({
  name: 'newsComp',

  components: { Row, Col , Empty , RightOutlined , Tabs , TabPane:Tabs.TabPane , articleList },
  setup() {
    return {
      activeKey:ref('1')
    }
  }

})
</script>

<style lang="less" scoped>
.home-common__warp {
  padding-top: 40px;
  padding-bottom: 60px;

  .in-icon{
    height: 360px;
    background: url("/src/assets/img/home6.jpg");

    a{
      position: absolute;
      bottom: 0;
      left: 0;
      display: inline-block;
      width: 100%;
      height: 60px;
      padding: 0 20px;
      line-height: 60px;
      color: white;
      background: rgba(0,0,0,.7);
    }
  }
}

.noticeComp{
  position: relative;
  width: 670px;
  height: 380px;

  .title{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 99;

    a{
      font-size: 14px;

      .anticon{
        font-size: 14px;
      }
    }
  }
}

::v-deep(.ant-tabs){
  .ant-tabs-nav  {

    .ant-tabs-tab{
      padding: 0 0 11px;
      font-size: 20px;
      font-weight: bold;

      &.ant-tabs-tab-active{
        color: #CD1922;
      }
    }

    .ant-tabs-ink-bar{
      height: 3px;
      background-color: #CD1922;
    }


  }
}
</style>
